<template>
  <div class="page">
    <div class="content">
      <div class="shipping-address">
        <div class="shipping-title">
          <span class="label">{{ $t('transport.historicalTransport') }}</span>
          <div class="left">
            <router-link to="/transport">
              <Button icon="md-add">{{ $t('transport.addTransshipmentOrder') }}</Button>
            </router-link>
            <router-link to="/user/order" class="fun-text">{{ $t('transport.returnMyOrder') }}</router-link>
          </div>
        </div>
      </div>
    </div>

    <div class="table-wrap">
      <div class="table">
        <div class="table-header">
          <Row>
            <Col span="4">
            <div class="th">{{ $t('transport.creationTime') }}</div>
            </Col>
            <Col span="4">
            <div class="th">{{ $t('transport.trackingNumber') }}</div>
            </Col>
            <Col span="4">
            <div class="th">{{ $t('transport.orderSStatus') }}</div>
            </Col>
            <Col span="4">
            <div class="th">{{ $t('transport.suborderQuantity') }}</div>
            </Col>
            <Col span="4">
            <div class="th">{{ $t('transport.orderNote') }}</div>
            </Col>
            <Col span="4">
            <div class="th">{{ $t('transport.controls') }}</div>
            </Col>
          </Row>
        </div>
        <div class="table-content">
          <div class="table-tr" v-for="item in dataList" :key="item.id">
            <Row>
              <Col span="4">
              <div class="td">
                {{ item.createTime }}
              </div>
              </Col>
              <Col span="4">
              <div class="td">
                {{ item.expressNo }}
              </div>
              </Col>
              <Col span="4">
              <div class="td">
                <order-status :status="item.orderStatus" :statusName="item.orderStatusName"
                  :subStatus="item.internalStatus"></order-status>
              </div>
              </Col>
              <Col span="4">
              <div class="td">
                {{ item.quantity }}
              </div>
              </Col>
              <Col span="4">
              <div class="td">
                {{ item.remarks }}
              </div>
              </Col>
              <Col span="4">
              <div class="td">
                <span class="btn" @click="editOrder(item.id)">
                  {{ $t('transport.modifyTrackingNumber') }}
                </span>
              </div>
              </Col>
            </Row>
          </div>
        </div>
      </div>
    </div>
    <t-loading v-if="loading"></t-loading>
    <t-no-data v-if="!loading && dataList.length == 0"></t-no-data>
    <div class="info">
      <Page :total="totalPage" @on-page-size-change="onPageSize" :current="form.pageNo" @on-change="onPage"
        :page-size="form.pageSize" show-sizer />
    </div>
    <!-- 修改订单号弹窗 -->
    <Modal class="pop" class-name="vertical-center-modal" width="480" v-model="showPop"
      :title="$t('transport.modifyTrackingNumber')">
      <div class="pop-label">
        {{ $t('transport.trackingNumber') }}
      </div>
      <Input v-model="value" :placeholder="$t('transport.enterRevisedTrackingNumber')" />
      <div slot="footer">
        <Button @click="showPop = false">{{ $t('public.cancel') }}</Button>
        <Button @click="onUpdateTransOrder" :loading="cLoading" type="primary">
          {{ $t('public.confirm') }}
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import TLoading from "@/components/t-loading";
import TNoData from "@/components/t-no-data";
import { transOrderList, updateTransOrder } from "@/api/order";
import OrderStatus from "@/views/main/user/components/order-status";
export default {
  name: "transport",
  components: { OrderStatus, TNoData, TLoading },
  data() {
    return {
      totalPage: 1,
      form: {
        orderNo: '',
        pageNo: 1,
        pageSize: 10
      },
      showPop: false,
      value: '',
      cLoading: false,
      loading: false,
      appName: process.env.VUE_APP_NAME,
      dataList: [],
      id: '', // 修改的id
    }
  },
  created() {
    this.getDataList()
  },
  methods: {
    editOrder(orderId) {
      this.id = orderId;
      this.showPop = true;
    },
    onUpdateTransOrder() {
      // 修改订单号
      this.cLoading = true;
      updateTransOrder(this.id, this.value).then((res) => {
        this.id = '';
        this.value = '';
        this.showPop = false;
        this.cLoading = false;
        this.$Message.success(this.$t('transport.modifiedSuccess'));
        this.getDataList();
      }).catch(() => {
        this.cLoading = false;
      })
    },
    onPageSize(size) {
      // 显示
      this.form.pageSize = size;
      this.form.pageNo = 1;
      this.getDataList();
    },
    onPage(index) {
      this.form.pageNo = index;
      this.getDataList();
    },
    getDataList() {
      this.loading = true;
      transOrderList(this.form).then((res) => {
        this.dataList = res.result.records;
        this.totalPage = res.result.pages;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      })
    }
  }
}
</script>

<style scoped lang="less">
.page {
  .guidebook {
    position: relative;
    background: @primary-color;
    padding: 44px;
    text-align: center;
    color: #FFFFFF;
    font-size: 32px;
    font-weight: 700;
    overflow: hidden;

    .r-4 {
      position: absolute;
      right: 0;
      bottom: -160px;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      background: linear-gradient(144deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
      opacity: 0.3;
    }
  }

  .content {
    width: 1200px;
    margin: 80px auto;

    .shipping-address {
      margin-top: 40px;

      .shipping-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        font-weight: 500;

        .label {
          font-size: 24px;
          color: @t-title-color;
        }

        .left {
          display: flex;
          align-items: center;

          .fun-text {
            cursor: pointer;
            display: block;
            margin-left: 24px;
            color: @primary-color;
          }
        }
      }

      .title-address {
        margin-top: 40px;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;
      }

      .current-address {
        position: relative;
        margin-top: 16px;

        .bg-border {
          display: block;
          width: 100%;
        }

        .address-info {
          position: absolute;
          left: 0;
          top: 0;
          right: 0;
          bottom: 0;
          padding: 40px;

          .top-label {
            color: @t-title-color;
            font-size: 14px;
            font-weight: 500;
          }

          .address-item {
            display: flex;
            align-items: center;
            margin-top: 8px;

            &:first-child {
              margin-top: 16px;
            }

            .label {
              width: 160px;
              color: @t-text-color;
              font-size: 14px;
            }

            .value {
              color: @t-title-color;
              font-size: 14px;
              font-weight: 500;

              span {
                margin-right: 16px;
              }
            }
          }
        }
      }
    }

    .alert {
      margin-top: 34px;
      margin-bottom: 34px;
      background: #f0f9ff;
      padding: 24px;
      border-radius: 4px;

      .title {
        color: @primary-color;
        font-size: 20px;
        font-weight: 500;

        .icon {}

        span {
          margin-left: 8px;
          color: @primary-color;
          font-size: 20px;
          font-weight: 500;
        }
      }

      .alert-content {
        margin-top: 4px;
        color: @t-title-color;
        font-size: 14px;
        line-height: 24px;
      }
    }

    .inquire {
      margin-bottom: 40px;

      .inquire-content {
        .card {
          margin-top: 16px;

          .row-gutter {
            margin-bottom: 16px;
          }
        }
      }

      .label {
        display: block;
        margin-bottom: 8px;
        color: @t-title-color;
        font-size: 14px;
        font-weight: 500;
      }

      .title {
        margin-bottom: 16px;
        color: @t-title-color;
        font-size: 16px;
        font-weight: 500;
      }

      .delete {
        height: 100%;
        display: flex;
        padding-top: 6px;

        .iconfont {
          cursor: pointer;
          color: @t-title-color;
          font-size: 18px;
        }
      }

      .add-btn {
        margin-top: 20px;
        height: 44px;
      }

      .start-query {
        margin-top: 16px;
        color: @primary-color;
        text-align: center;
        font-size: 14px;

        span {
          cursor: pointer;
        }
      }
    }

    .btn-wrap {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 16px;
        width: 140px;
        height: 52px;
        border-radius: 2px;
        cursor: pointer;
        border: 1px solid @t-title-color;
        font-size: 14px;
        font-weight: 500;
      }

      .settle-accounts {
        color: #ffffff;
        background: @primary-color;
        border: 1px solid @primary-color;
      }

      .forecast {
        color: @t-title-color;
      }
    }

    .tooltip {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 8px;
      text-align: right;
      color: @t-text-color;

      .tooltip-content {
        cursor: pointer;

        .iconfont {
          font-size: 14px;
        }
      }
    }
  }
}

.table-wrap {
  width: 1200px;
  margin: 0 auto;

  .table {
    &-header {
      padding: 12px 0;

      .th {
        color: @t-title-color;
        font-size: 14px;
        font-weight: 600;
      }
    }

    &-content {
      border-top: 1px solid @t-table-border-color;

      .table-tr {
        padding: 16px 0;
        border-bottom: 1px solid @t-table-border-color;

        &:hover {
          background: rgba(235, 247, 255, 0.4);
        }

        .table-top {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }

        .td {
          .btn {
            cursor: pointer;
            color: @primary-color;
          }
        }
      }
    }
  }
}

.info {
  width: 1200px;
  margin: 24px auto;
  text-align: right;
}

.pop {
  .pop-label {
    margin-bottom: 8px;
    color: @t-title-color;
    font-size: 14px;
    font-weight: 500;

    span {
      color: @primary-color;
    }

  }
}
</style>